<template>
	<view class="content">
		<view class="row b-b">
			<text class="tit">联系人</text>
			<input class="input" type="text" v-model="address.userName" placeholder="收货人姓名" placeholder-class="placeholder" />
		</view>
		<view class="row b-b">
			<text class="tit">手机号</text>
			<input class="input" type="number" v-model="address.telNumber" placeholder="收货人手机号码" placeholder-class="placeholder" />
		</view>
		<view class="row b-b">
			<text class="tit">所在地区</text>
			<input class="input" type="text" @click="showCityPicker" v-model="addressArea" placeholder="所在地区" placeholder-class="placeholder" />
		</view>
		<view class="row b-b"> 
			<text class="tit">详细地址</text>
			<input class="input" type="text" v-model="address.detailInfo" placeholder="详细地址" placeholder-class="placeholder" />
		</view>
		<view class="row b-b">
			<text class="tit">邮编</text>
			<input class="input" type="text" v-model="address.postalCode" placeholder="邮编" placeholder-class="placeholder" />
		</view>
		<!--
		<view class="row b-b">
			<text class="tit">地址</text>
			<text @click="chooseLocation" class="input">
				{{address.addressName}}
			</text>
			<text class="yticon icon-shouhuodizhi"></text>
		</view>
		-->
		<view class="row default-row">
			<text class="tit">设为默认</text>
			<switch :checked="checkedDefault" color="#fa436a" @change="switchChange" />
		</view>
		<button class="add-btn" @click="confirm">提交</button>
		<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault"
		 @onCancel="onCancel" @onConfirm="onConfirm"></mpvue-city-picker>
	</view>
</template>

<script>
	import mpvueCityPicker from '../../components/mpvue-citypicker/mpvueCityPicker.vue'
	import cityData from '../../common/city.data.js';
	
	export default {
		components: {
			mpvueCityPicker
		},
		data() {
			return {
				address: {
					id:null,
					userId:null,
					userName: '',
					telNumber: '',
					detailInfo: '',
					provinceName:null,
					cityName:null,
					countyName:null,
					label: '',
					isdefault: 0,
					nationalCode:'',
					postalCode:'',
				},
				checkedDefault:false,
				addressName:'在地图选择',
				addressArea:'',
				themeColor: '#007AFF',
				cityPickerValueDefault: [0, 0, 1],
			}
		},
		onLoad(options){
			commonOnLoad.commonOnLoad(this.$mRoutesConfig.main,options,options.referenceId);//options.referenceId
			setTimeout(() => {
				this.showImg = true;
				// #ifdef H5  
				if (this.$wechat && this.$wechat.isWechat()) {  
					var url = this.$mConfig.baseUrl + "/api/shorturl/" + this.$mConfig.mpAppId + "/index";
					if(this.$store.getters.hasLogin){
						url = url + "?referenceId=" + this.$store.state.userInfo.id;
					}
					 this.$wechat.share({  
						  desc: this.$mConfig.descTxt,  
						  img: this.$mConfig.logoImgUrl,  
						  title:this.$mConfig.loginTitleTxt,  
					},url);  
				}  
				// #endif  
			}, 1000);
			
			let title = '新增地址';
			if(options && options.id){
				title = '编辑地址'
				if(!!this.$store.state.selectAddress){
					this.address = this.$store.state.selectAddress;
					this.showAddressArea();
				}else{
					this.getAddress(options.id);
				}
			}
			this.manageType = options.type;
			uni.setNavigationBarTitle({
				title
			})
			
			// #ifdef MP
			if (!this.$store.getters.hasLogin ) {
				this.$store.commit("SET_IS_SILENT_LOGIN", true);
				this.silentLogin();
			}
			// #endif
			
		},
		onShareAppMessage() {
			let path = "/pages/index/index";
			if(this.$store.getters.hasLogin){
				path = path + "?referenceId=" + this.$store.state.userInfo.id;
			}
			return {
				title: this.$mConfig.descTxt,
				path: path,
				imageUrl:this.$mConfig.logoImgUrl
			}
		},
		methods: {
			switchChange(e){
				if(e.detail){
					this.checkedDefault = true;
					this.address.isdefault = 1;
				}else{
					this.checkedDefault = false;
					this.address.isdefault = 0;
				}
			},
			onCancel(e) {
				console.log(e)
			},
			onConfirm(e) {
				this.address.postalCode = e.cityCode;
				this.address.nationalCode = JSON.stringify(e.value);
				var pcc = e.label.split("-");
				this.address.provinceName = pcc[0];
				this.address.cityName = pcc[1];
				this.address.countyName = pcc[2];
				this.addressArea = e.label;
			},
			//地图选择地址
			chooseLocation(){
				uni.chooseLocation({
					success: (data)=> {
						this.addressName = data.name;
						this.address.address = data.name;
					}
				})
			},
			showCityPicker(){
				this.$refs.mpvueCityPicker.show();
			},
			async getAddress(id){
				let data = await this.$apis.getAddress(id,{});
				this.address = data.address;
				this.showAddressArea();
			},
			showAddressArea(){
				this.cityPickerValueDefault = JSON.parse(this.address.nationalCode);
				this.addressArea = this.address.provinceName + '-' + this.address.cityName + '-' + this.address.countyName;
			},
			//提交
			async confirm(){
				let address = this.address;
				if(!address.userName){
					uni.showToast({
						title: "请填写收货人姓名",
						icon: "none",
						mask:false,
						duration: 2000
					});
					return;
				}
				if(!/(^1[3|4|5|7|8][0-9]{9}$)/.test(address.telNumber)){
					uni.showToast({
						title: "请输入正确的手机号码",
						icon: "none",
						mask:false,
						duration: 2000
					});
					return;
				}
				if(!this.addressArea){
					uni.showToast({
						title: "请选择所在地区",
						icon: "none",
						mask:false,
						duration: 2000
					});
					return;
				}
				if(!address.detailInfo){
					uni.showToast({
						title: "请填写详细信息",
						icon: "none",
						mask:false,
						duration: 2000
					});
					return;
				}
				var query = {
					address:this.address
				};
				//this.$api.prePage()获取上一页实例，可直接调用上页所有数据和方法，在App.vue定义
				if(!!this.$store.state.orderId){
					let data = await this.$apis.saveAddressAddToOrder(this.$store.state.orderId,query);
					this.$mRouter.push({
						route: this.$mRoutesConfig.orderEdit,
						query: {
							id: this.$store.state.orderId
						}
					});
				}else{
					let data = await this.$apis.saveAddress(query);
					this.$mRouter.push({
						route: this.$mRoutesConfig.address,
						query: {
						}
					});
				}
			},
		}
	}
</script>

<style lang="scss">
	page{
		background: $page-color-base;
		padding-top: 16upx;
	}

	.row{
		display: flex;
		align-items: center;
		position: relative;
		padding:0 30upx;
		height: 110upx;
		background: #fff;
		
		.tit{
			flex-shrink: 0;
			width: 150upx;
			font-size: 30upx;
			color: $font-color-dark;
		}
		.input{
			flex: 1;
			font-size: 30upx;
			color: $font-color-dark;
		}
		.icon-shouhuodizhi{
			font-size: 36upx;
			color: $font-color-light;
		}
	}
	.default-row{
		margin-top: 16upx;
		.tit{
			flex: 1;
		}
		switch{
			transform: translateX(16upx) scale(.9);
		}
	}
	.add-btn{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 690upx;
		height: 80upx;
		margin: 60upx auto;
		font-size: $font-lg;
		color: #fff;
		background-color: $base-color;
		border-radius: 10upx;
		box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
	}
</style>
